<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/pages/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <title>菜单列表</title>
    <%@ include file="/WEB-INF/pages/include/baseCSS.jsp"%>
    <link href="${ctxStatic}/vendor/plugins/layer-v2.3/layer/skin/layer.css" rel="stylesheet">
    <SCRIPT type='text/javascript'>
	</SCRIPT>
</head>

<body>
  <!-- Begin: Content -->
  <section id="content" class="table-layout animated fadeIn" style="background:#eeeeee">
   		<!-- begin: .tray-left -->
        <aside class="tray tray-left tray200" data-tray-height="match">
        	<h4> 系统设置 -<small>菜单设置</small></h4>
            <div class="simple-tree" data-tree-url="${ctx}/menu/tree" data-tree-onClick="onClick" />
        </aside>
        <!-- end: .tray-left -->
	  <!-- begin: .tray-center -->
	  <div class="tray tray-center">
	  	  <!-- Begin: Admin Panel Wrapper -->
          <div class="admin-panels mw900 center-block" style="padding-bottom: 125px;">
		  <div class="row" id="spy1">
			  <div class="col-sm-12 admin-grid">
			 	<div class="panel panel-info" id="menulist" data-panel-fullscreen="fasle" data-panel-color="true" data-panel-title="false" data-panel-remove="false" data-panel-collapse="false" >
			       <div class="panel-heading">
			         <span class="panel-icon">
                        <i class="fa fa-table"></i>
                      </span>
			         <span class="panel-title">
			           	菜单管理
			         </span>
			         <span class="panel-controls">
			         	<a href="#" id="add" class="fa fa-plus" style="line-height:50px;"></a>
			         </span>
			       </div>
			       <div class="panel-body pn">
			         <div class="table-responsive">
			           <div class="bs-component">
			             <form class="admin-form" action="${ctx}/menu/list/" method="post">
			             <input type="hidden" id="treeId" name="treeId"></input>
				             <table class="table table-hover" >
				               <thead>
				                 <tr class="system">
				                 	<th>选择</th>
				                 <!--   <th>编号</th> -->
				                   <th>图标</th>
				                   <th>名称</th>
				                   <th>地址</th>
				                   <th>排序</th>
				                   <th>操作</th>
				                 </tr>
				               </thead>
				               <tbody>
				                <c:forEach var="menu" items="${page.list}" varStatus="status">
					             	<tr>
					             	  <td class="">
				                        <label class="option block mn">
				                          <input type="checkbox" name="mobileos" value="FR">
				                          <span class="checkbox mn"></span>
				                        </label>
				                       </td>
					                   <%-- <td>${status.index+1}</td> --%>
					                   <td><span class="glyphicon ${menu.icon}"></span></td>
					                   <td>${menu.name}</td>
					                   <td>${menu.url}</td>
					                   <td>${menu.sort}</td>
					                   <td> 
						                   <div class="bs-component" style="float:right">
						                   	  <button name="authorize" type="button" onclick="toAuthorize('${menu.id}')" class="btn btn-sm btn-hover btn-success">授权</button>
						                   	  <button name="edit" type="button" onclick="toEdit('${menu.id}')" class="btn btn-sm btn-hover btn-primary">修改</button>
							                  <button name="delete" type="button" onclick="toDel('${menu.id}')" class="btn btn-sm btn-hover btn-danger">删除</button>
							               </div>
						               </td>
					                 </tr>
				            	</c:forEach>
				               </tbody>
				             </table>
			             </form>
			             <%@ include file="/WEB-INF/pages/basic/paginator.jsp"%>
			           </div>
			         </div>
			       </div>
			     </div>
			  </div>
		  </div>
		  </div>
	  </div>
  </section>
<!-- START: PAGE SCRIPTS -->
<%@ include file="/WEB-INF/pages/include/baseJS.jsp"%>
  <script type="text/javascript">
  //菜单点击事件
  function onClick(event, treeId, treeNode, clickFlag) {
	  $('#treeId').val(treeNode.id);
	  $(".admin-form").submit();
 	  return false;
  }
  
  //菜单绑定权限
  function toAuthorize(id){
	  parent.openWindow({
		  url:'${ctx}/menu/authorize?id='+id,//iframe页面
		  title:'绑定菜单权限',//弹出窗标题
		  width:'500px',//弹出窗宽度
		  height:'480px',//弹出窗高度
		  formName:'menu-authorize-form',//form表单
		  submitUrl:'${ctx}/menu/authorizesave'
	  });
  }
  
  //删除菜单
  function toDel(id){
	  parent.toDelete({
		  url:'${ctx}/menu/delete',
		  data:{'id':id},
		  success:function(){
			  $(".admin-form").submit();
			  return false;
		  }
	  });
  };
  
  //编辑菜单
  function toEdit(id){
	  parent.openWindow({
		  url:'${ctx}/menu/form?id='+id,//iframe页面
		  title:'修改菜单',//弹出窗标题
		  width:'500px',//弹出窗宽度
		  height:'480px',//弹出窗高度
		  formName:'menu-form',//form表单
		  submitUrl:'${ctx}/menu/save',//form表单提交地址
		  success:function(){
			  $(".admin-form").submit();
			  return false;
		  }
	  });
  };
  
  jQuery(document).ready(function() {
	 //新增菜单
	 $('#add').click(function(){
		  parent.openWindow({
			  url:'${ctx}/menu/form',//iframe页面
			  title:'新增菜单',//弹出窗标题
			  width:'500px',//弹出窗宽度
			  height:'480px',//弹出窗高度
			  formName:'menu-form',//form表单
			  submitUrl:'${ctx}/menu/save',//form表单提交地址
			  success:function(){
				  $(".admin-form").submit();
				  return false;
			  }
		  });
	  });
	 
    // Because we are using Admin Panels we use the OnFinish
    // callback to activate the demoWidgets. It's smoother if
    // when we let the panels be moved and organized before
    // filling them with content from various plugins

    // Init plugins used on this page
    // HighCharts, JvectorMap, Admin Panels

    // Init Admin Panels on widgets inside the ".admin-panels" container

    $('.admin-panels').adminpanel({
      grid: '.admin-grid',
      draggable: false,
      mobile: false,
      callback: function() {
        //bootbox.confirm('<h3>A Custom Callback!</h3>', function() {});
      },
      onFinish: function() {
        // Init Demo settings
        //$('#menulist .panel-control-color').click();
      },
      onSave: function() {
        //$(window).trigger('resize');
      }
    });

  });
  </script>
  <!-- END: PAGE SCRIPTS -->
</body>
</html>
